<%@page import="classes.product"%>
<%@page import="java.util.ArrayList"%>
<%ArrayList<product> productos = (ArrayList<product>) session.getAttribute("busquedaProductos");%>
<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.sql.*" errorPage="error.jsp" %>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home | Alvaro´shop</title>
        <link href="shopStyles.css" rel="stylesheet" type="text/css"> <!-- guardamos el css en la raiz porque sino hay cosas que no funcionan -->
        <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="css/style2.css" />



        <!-- Coloca esta petición de presentación donde creas oportuno. -->
        <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>

        <script>
            function about()
            {
                alert("Aplicacion realizada por:\nAlvaro Garcia Ojea\n5º Ingenieria informatica.\n\nEmail: alvarogarcia9@gmail.com");
            }
        </script>

        <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
        <script language="javascript" type="text/javascript" src="js/script.js"></script>
        <!-- shopingcart -->
        <script language="javascript" type="text/javascript" src="js/addCart.js"></script>
        <!-- end -->

        <style>

            ul.lof-main-wapper li {
                position:relative;	
            }
        </style>

    </head>

    <body>




        <div id="fb-root"></div>
        <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

        <div class="container">
            <div class="header">

                <table width="100%" border="0">
                    <tr>
                        <td><img src="images/logoshop2.png" width="410" height="165" alt="shop"></td>
                        <td align="right"><img src="images/flag copia.png" width="149" height="123" alt="yourf1store">
                            <!-- Boton me gusta de facebook -->
                            <div class="fb-like" data-send="true" data-layout="button_count" data-width="100" data-show-faces="true"></div>


                            <%-- IDENTIFIACION DE USUARIO CON SESIONES O COOKIES --%>

                            <%@ page language="java" %>
                            <%
                                String cookieName = "email";
                                Cookie cookies[] = request.getCookies();

                                Cookie email = null;
                                if (cookies != null) {
                                    for (int i = 0; i < cookies.length; i++) {
                                        if (cookies[i].getName().equals(cookieName)) {
                                            email = cookies[i];
                                            break;
                                        }
                                    }
                                }
                            %>



                            <!-- SiteSearch Google -->
                            <FORM method="get" action="http://www.google.com/search">
                                <input type=hidden name=ie value=UTF-8>
                                <input type=hidden name=oe value=UTF-8>
                                <TABLE bgcolor="#F27405" class="borderSearchRightDown"><tr>
                                        <td class="borderSearchRightDown">
                                            <INPUT TYPE="search" name="q" size="31" maxlength="255" value="" placeholder="Search something you want...">
                                            <INPUT type="submit" name="btnG" VALUE="Buscar en sitio">
                                            <font size=-1>
                                            <input type="hidden" name="domains" value="index.jsp"><br><input type="radio" name="sitesearch" value=""> 
                                            <span class="fontSpecial">WWW</span>
                                            <input type="radio" name="sitesearch" value="index.jsp" checked>
                                            <span class="fontSpecial">F1 store</span><br>
                                            </font>

                                        </td></tr></TABLE>
                                <!-- Reconocimiento de usuario -->

                                <div align="right">
                                    <!-- Reconocimiento de usuario -->


                                    <label><strong><%if (email != null) {%><%=email.getValue()%></strong> | <a href="javascript:Abrir_ventana('logout_popup.jsp')"><font size="1" face="Verdana">logout</font></a> </label>
                                    <label> | <a href="options.jsp"><font size="1" face="Verdana">options</font></a></label> 
                                            <%} else {

                                            %>
                                    <label><strong> Unknown user |</strong></label> <a href="login.jsp">Login</a>
                                    <%}%>

                                    <!-- Fin reconocimiento del usuario -->    
                                    <img src="images/eng.gif" width="20" height="15" alt="eng">   
                                    <img src="images/esp.gif" width="20" height="15" alt="esp"> 
                                    <img src="images/fra.gif" width="20" height="15" alt="fra"> 
                                    <img src="images/ger.gif" width="20" height="15"> 
                                    <img src="images/por.gif" width="20" height="15" alt="por">
                                    <a href="#final" class="fontSpecialLanguageChooser"><font size="1" face="Verdana">Choose language</font></a></div>

                            </FORM>
                    </tr>
                </table>

            </div>
        </div>

        <div class="container">
            <div class="header">
                <ul class="menu">    
                    <li><a href="index.jsp"><span>Home</span></a></li>
                    <% if (email == null) {
                    %>

                    <li><a href="login.jsp"><span>Login</span></a></li>
                    <li><a href="signup.jsp"><span>Signup</span></a></li>

                    <%} else {%>
                    <li><a href="logout_popup.jsp"><span>Logout</span></a></li>
                    <li><a href="options.jsp"><span>Options</span></a></li>
                    <%}%>      
                    <li onClick="about()"><a href="#"><span>About</span></a></li>
                    <li><a href="contact.jsp"><span>Contact</span></a></li>
                    <li><a href="cars.jsp"><span>Cars</span></a></li>
                    <li><a href="/Apparel"><span>Apparel</span></a></li>
                    <li><a href="gadgets.jsp"><span>Gadgets</span></a></li>
                    <li><a href="/CarAccessories"><span>Car Accesories</span></a></li>
                    <li><a href="search.jsp" class="active"><span>Search</span></a></li>
                    <li><a href="Scart.jsp"><span>Cart</span></a></li>

                </ul>

            </div>
        </div>

        <div class="container">
            <div class="content">







            </div>
            <table width="100%" height="226" border="0">
                <tr>
                    <td width="14%" align="center" valign="top" class="fontSpecial"><div align="left">
                            <p>&nbsp;</p>
                            <p>Categories  | <a href="allproducts.jsp">All products</a></p>
                            <ul id="MenuBar1" class="MenuBarVertical">
                                <li><a class="MenuBarItemSubmenu" href="cars.jsp">Cars</a>
                                    <ul>
                                        <li><a href="ferrari.jsp">Ferrari</a></li>
                                        <li><a href="redbull.jsp">Red Bull Racing</a></li>
                                        <li><a href="mcclaren.jsp">McClaren-Mercedes</a></li>
                                        <li><a href="mercedes.jsp">Mercedes</a></li>
                                        <li><a href="williams.jsp">Williams-Cosworth</a></li>
                                        <li><a href="tororosso.jsp">Toro Rosso</a></li>
                                        <li><a href="renault.jsp">Renault</a></li>
                                        <li><a href="forceindia.jsp">Force India-Mercedes</a></li>
                                        <li><a href="sauber.jsp">Sauber</a></li>
                                        <li><a href="lotus.jsp">Lotus-Renault</a></li>
                                        <li><a href="hispania.jsp">Hispania RT</a></li>
                                        <li><a href="virgin.jsp">Virgin</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" class="MenuBarItemSubmenu">Apparel</a>
                                    <ul>
                                        <li><a href="shirts.jsp">Shirts</a></li>
                                        <li><a href="jackets.jsp">Jackets</a></li>
                                        <li><a href="pants.jsp">Pants</a></li>
                                        <li><a href="underware.jsp">Underware</a></li>
                                        <li><a href="sneakers.jsp">Sneakers</a></li>
                                    </ul>
                                </li>
                                <li><a href="gadgets.jsp">Gadgets</a>	          </li>
                                <li><a href="#" class="MenuBarItemSubmenu">Car accessories</a>
                                    <ul>
                                        <li><a href="lights.jsp">Lights</a></li>
                                        <li><a href="tyres.jsp">Tyres</a></li>
                                        <li><a href="wheel.jsp">Steering wheel</a></li>
                                        <li><a href="others.jsp">Other pieces</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <p><img src="images/makemonet.png" width="108" height="212" alt="money">

                            <!-- Beginning of meebo me widget code.
                        Want to talk with visitors on your page?  
                        Go to http://www.meebome.com/ and get your widget! -->
                            <embed src="http://widget.meebo.com/mm.swf?BRqynkBnZM" type="application/x-shockwave-flash" width="150" height="300"></embed>
                        </p>
                        <p>&nbsp;</p>
                        <p>&nbsp; </p>
                        <p>&nbsp; </p>
                        <p>&nbsp; </p></td>
                    <td width="86%" align="right" valign="top" class="borderImagesRight">
                        <form name="signup" method="get" action="/ShopOnline/listSearchProducts">
                            <div align="center">
                                <p>&nbsp;</p>            
                                <h2>Search 
                                    <label for="search"></label>
                                </h2>
                                <table width="60%" border="0" class="popup">
                                    <tr>
                                        <td width="67%" align="right" valign="top"><table width="100%" border="0">
                                                <tr>
                                                    <td><div align="center">
                                                            <input name="suggest1" type="text" id="suggest1" value="Williams 2008" placeholder="search in this site..." autofocus autocomplete="on">
                                                  </div></td>
                                                </tr>
                                                <tr>
                                                    <td width="53%"><div align="center">by
                                                            <select name="by" id="by">
                                                                <option value="team">team</option>
                                                                <option value="name" selected>name</option>
                                                                <option value="description">description</option>
                                                                <option value="price">price</option>
                                                        </select>
                                                        </div></td>
                                                </tr>
                                                <tr>
                                                    <td><div align="center">
                                                            <input type="submit" name="go" id="go" value="GO!">
                                                        </div></td>
                                                </tr>
                                            </table></td>
                                        <td width="33%" align="left" valign="top"><img src="images/search.png" width="91" height="102" alt="search"></td>
                                    </tr>
                                </table>
                                <p>&nbsp;</p>
                                <p>&nbsp;</p>
                            </div>
                        </form>
                        <div>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                        </div>
                        <div><!-- Div para imprimir los resultados-->


                            <div align="center">
                                <%
                    if (productos == null) {%>

                                <%} else {
                for (product cl : productos) {%>

                                <table>
                                    <tr>
                                        <td width="59"><label><strong>Team:</strong> <%=cl.getTeam()%></label></td>
                                        <td width="62"><label><strong>Name: </strong><%=cl.getName()%></label></td>
                                        <td width="103"><label><strong>Description: </strong><%=cl.getDescription()%></label></td>
                                        <td width="42"><label><strong>Stock:</strong> <%=cl.getStock()%></label></td>
                                        <td width="80"><label class="tableComments"><%=cl.getPrice()%> € </label></td>
                                        <td width="258"><img src="<%=cl.getDir()%>" alt="photo" width="250" height="150" class="borderImages"></td>
                                        <td width="258">
                                            <form name="order">
                                                <p>
                                                    <strong>
                                                        <input onClick="add(this.form)" type="button" id="boton" value="Add">
                                                        <input maxlength=2 id="inputs" size="2" value="1" name="quantity">
                                                        <input type="hidden" value="<%=cl.getPrice()%>" name="price">
                                                        <input type="hidden" value="<%= cl.getName()%>" name="product"> 
                                                        <input type="hidden" value="<%= cl.getTeam()%>" name="ref">
                                                    </strong></p>
                                            </form>
                                        </td>
                                    </tr>
                                </table>
                                <%}
                    }%>
                            </div>
                        </div><!-- Div para imprimir los resultados-->


                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p></td>
                </tr>
            </table>
        </div>
    </div>



    <div class="container">
        <div class="footer">
            <h5 align="center" class="white">Alvaro F1 online shop - Your F1 store</h5>
            <a name="final"></a><!-- Marcador para ir al final de la pagina -->
            <div id="google_translate_element" align="center"></div>
            <div align="center">
                <script>
                function googleTranslateElementInit() {
                    new google.translate.TranslateElement({
                        pageLanguage: 'es'
                    }, 'google_translate_element');
                }
                </script>
                <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                <img src="images/footerShop.png" width="940" height="74" alt="footer"></div>
        </div>
    </div>

    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
</body>
</html>